<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 定义props
const props = defineProps<{
  modelValue: Array<{ [key: string]: string }>
  headers: Array<{ key: string; label: string; placeholder: string }>
  rowHeight?: string
}>()

// 定义emits
const emit = defineEmits<{
  'update:modelValue': [value: Array<{ [key: string]: string }>]
}>()

// 添加新行
const addRow = () => {
  const newRow: { [key: string]: string } = {}
  props.headers.forEach(header => {
    newRow[header.key] = ''
  })
  const newData = [...(props.modelValue || []), newRow]
  emit('update:modelValue', newData)
}

// 删除行
const removeRow = (index: number) => {
  const newData = (props.modelValue || []).filter((_, i) => i !== index)
  emit('update:modelValue', newData)
}

// 更新单元格值
const updateCell = (index: number, key: string, value: string) => {
  const newData = [...(props.modelValue || [])]
  if (newData[index]) {
    newData[index][key] = value
    emit('update:modelValue', newData)
  }
}
</script>

<template>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead>
        <tr>
          <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
          <th 
            v-for="header in headers" 
            :key="header.key"
            class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            {{ header.label }}
          </th>
          <th class="px-4 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <tr v-for="(row, index) in modelValue" :key="index">
          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ index + 1 }}</td>
          <td v-for="header in headers" :key="header.key" class="px-4 py-3 whitespace-nowrap">
            <input
              type="text"
              :value="row[header.key] || ''"
              @input="updateCell(index, header.key, ($event.target as HTMLInputElement).value)"
              :placeholder="header.placeholder"
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              :style="{ height: rowHeight || 'auto' }"
            />
          </td>
          <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
            <button
              @click="removeRow(index)"
              class="text-red-500 hover:text-red-700"
              :disabled="modelValue.length <= 1"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="mt-2 text-right">
      <button
        @click="addRow"
        class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
      >
        添加行
      </button>
    </div>
  </div>
</template>

<style scoped>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>